<template>
	<el-menu :collapse="isCollapsed" router active-text-color="#ffd04b" background-color="#545c64"
		class="el-menu-vertical-demo" text-color="#fff">
		<template v-for="menu in menuList">
			<!-- 拥有子级菜单 -->
			<el-sub-menu v-if="menu.children" :index="menu.id">
				<template #title>
					<el-icon><Discount /></el-icon>
					<span>{{menu.name}}</span>
				</template>
				<el-menu-item v-for="sub_menu in menu.children" :index="sub_menu.path">
					<el-icon><Minus /></el-icon>
					<span>{{sub_menu.name}}</span>
				</el-menu-item>
			</el-sub-menu>
			<!-- 无子级菜单 -->
			<el-menu-item v-else :index="menu.path">
				<el-icon>
					<CaretRight />
				</el-icon>
				<span>{{menu.name}}</span>
			</el-menu-item>
		</template>
	</el-menu>

</template>

<script setup>

import { storeToRefs } from 'pinia';
import { useMenuStore } from '@/stores/menu';
import { onMounted, ref } from 'vue'
import Role from '@/api/Role'
let menu = useMenuStore();
//从store中提取属性同时保持响应式
let { isCollapsed } = storeToRefs(menu);

//根据角色id获取当前登录账户的侧边栏菜单
let id = sessionStorage.role;
let menuList = ref([]);
//默认开启的菜单
let default_open = ref([])

onMounted(async () => {
	let { status, msg, data } = await Role.menu({ id, type: 'tree' });
	if (status) {
		//默认开启第一个
		let menu = data.find((item) => item.children);
		//存储默认开启menu
		menuList.value = data;
	}

})

</script>
<style scoped>
.el-menu {
	border: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 150px;
}
</style>